<template>
  <div class="shop-message">
    <div class="shop-name">
      <img :src="goods.shopLogo" alt=""><span>{{goods.name}}</span>
    </div>
    <div class="shop-more-info">
      <div class="shop-text">
        <div class="shop-item">
          <h2>{{goods.cSells}}</h2>
          <p>总销量</p>
        </div>
        <div class="shop-item">
          <h2>{{goods.cGoods}}</h2>
          <p>全部宝贝</p>
        </div>
      </div>
      <div class="shop-assess">
        <div class="shop-assess-item"
             v-for="(item, index) in goods.score"
             :key="index">
          <span>{{item.name}}</span>
          <span :class="{isBad: !item.isBetter}">{{item.score}}</span>
          <span v-if="item.isBetter">高</span>
          <span v-else style="background-color: #339966">低</span>
        </div>
      </div>
    </div>
    <div class="enter-shop">
      <a :href="goods.shopUrl">进店逛逛</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShopInfo",
  props: {
    goods: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style scoped>
  .shop-name img {
    width: 48px;
    height: 48px;
    vertical-align: middle;
    border-radius: 24px;
    margin-right: 10px;
  }
  .shop-name span {
    font-size: 20px;
  }
  .shop-text {
    flex: 1;
    margin-top: 20px;
    width: 50%;
    display: flex;
    border-right: 1px solid #dddddd;
  }
  .shop-item {
    flex: 1;
    text-align: center;
  }
  .shop-item h2 {
    font-weight: 400;
    font-size: 16px;
  }
  .shop-item p {
    font-size: 14px;
  }
  .shop-more-info {
    display: flex;
  }
  .shop-assess {
    flex: 1;
    width: 50%;
  }
  .shop-assess-item {
    display: flex;
    padding: 0 20px;
    margin: 5px 0;
  }
  .shop-assess-item span:first-child {
    flex: 60%;
  }
  .shop-assess-item span:nth-child(2) {
    flex: 30%;
    color: #f13e3a;
  }
  .shop-assess-item span:last-child {
    flex: 10%;
    color: #ffffff;
    background-color: #f13e3a;
  }
  .isBad {
    color: #339966!important;
  }
  .enter-shop {
    text-align: center;
    margin: 20px 0;
  }
  .enter-shop>a {
    display: inline-block;
    padding: 5px 30px;
    background-color: #eeeeee;
    border-radius: 10px;
  }
</style>